<!-- 商品评论 -->
<template>
	<view class="page page">
		<status-bar title='评论'></status-bar>
		
		
		<backTop v-if='toTop'></backTop>
		
		
		<view class="myTabs">
			<view class="flex-box tabs-list">
				<view class="tabsItem" :class="{active:currTab == 0}" @click="chkTab(0,'','')">
					<text :class="currTab== 0?'txt':'thmeColor'" :style="{'--color': color}">全部
						<text v-if='count.allcount>0' class="count" :class="{MORE:count.allcount>999}">{{count.allcount>999?999:count.allcount}}</text>
					</text>
					<text class="thmeBg" :style="{'--color': color}"></text>
				</view>
				<view class="tabsItem" :class="{active:currTab == 1}" @click="chkTab(1,0,'优质')">
					<text :class="currTab== 1?'txt':'thmeColor'" :style="{'--color': color}">优质
						<text v-if='count.goodcount>0' class="count" :class="{MORE:count.goodcount>999}">{{count.goodcount>999?999:count.goodcount}}</text>
					</text>
					<text class="thmeBg" :style="{'--color': color}"></text>
				</view>
				<view class="tabsItem" :class="{active:currTab == 2}" @click="chkTab(2,1,'良好')">
					<text :class="currTab== 2?'txt':'thmeColor'" :style="{'--color': color}">良好
						<text v-if='count.midcount>0' class="count" :class="{MORE:count.midcount>999}">{{count.midcount>999?999:count.midcount}}</text>
					</text>
					<text class="thmeBg" :style="{'--color': color}"></text>
				</view>
				<view class="tabsItem" :class="{active:currTab == 3}" @click="chkTab(3,2,'一般')">
					<text :class="currTab== 3?'txt':'thmeColor'" :style="{'--color': color}">一般
						<text v-if='count.badcount>0' class="count" :class="{MORE:count.badcount>999}">{{count.badcount>999?999:count.badcount}}</text>
					</text>
					<text class="thmeBg" :style="{'--color': color}"></text>
				</view>
				<view class="tabsItem" :class="{active:currTab == 4}" @click="chkTab(4,666,'有图')">
					<text :class="currTab== 4?'txt':'thmeColor'" :style="{'--color': color}">有图
						<text v-if='count.imgcount>0' class="count" :class="{MORE:count.imgcount>999}">{{count.imgcount>999?999:count.imgcount}}</text>
					</text>
					<text class="thmeBg" :style="{'--color': color}"></text>
				</view>
			</view>
			<template v-if='comment_labels && comment_labels.length > 0'>
				<view class="title flex-box" @click="showLabel = !showLabel">
					<view class="flex-box align-center">
						<text>按分类看评价</text>
						<text class="iconfont" :class="showLabel?'icon-shangsanjiaoxing':'icon-xiasanjiaoxing'"></text>
					</view>
				</view>
				<view class="comment-tags" v-if='showLabel'>
					<text @click="chkTag(lab.id)" v-for="(lab,l) in comment_labels" :key='l' :class="{
						active: label_id == lab.id
					}" :style="{'--color': color}">{{ lab.title }}({{ lab.num }})</text>
				</view>
			</template>
		</view>
		
		
		
		<!-- Start 评论列表 -->
		<view class="commentList">
			<view v-if="commentList.length > 0" class="boxsShadow commentItem" :class="item.comment_receive?'radius':'noReplayRadious'" v-for="(item,index) in commentList" :key='index'>
				<view class="flex-box align-center">
					<image @error="item.v_headimg=''" :src="item.v_headimg?item.v_headimg:staticUrl+'/images/head.jpg'" class="userHead boxsShadow"></image>
					<text class="userName thmeTxt" v-if="item.v_name">{{item.v_name}}</text>
					<text class="userLevel iconfont icon-vip thmeColor" :style="{'--color': color}"></text>
				</view>
				<view class="commentContent">
					<view class="flex-between flex-box align-center">
						<view class="starBox">
							<block v-for="i in 5" :key='i'>
								<text class="iconfont icon-xingxing1"></text>
							</block>
							<view class="starMask" :style="{width: parseFloat(item.star)/5*100+'%'}">
								<block v-for="i in 5" :key='i'>
									<text class="iconfont icon-xingxing"></text>
								</block>
							</view>
						</view>
						<text class="time">{{item.created_at}}</text>
					</view>
					<view class="usercmt">{{item.comment_word}}</view>
					<view class="comment-tags" v-if='item.comment_label'>
						<text v-for="(lab,l) in item.comment_label" :key='l'>{{ lab }}</text>
					</view>
					<ImgLayOut width='170' v-if='item.comment_pic' :imgData='item.comment_pic'></ImgLayOut>
					<!-- <view class="goodsName">{{item.goods_name}}</view> -->
				</view>
				<view class="storeReplay relative" v-if='item.comment_receive'>
					<view class="thmeBg" :style="{'--color': color}"></view>
					<view class="flex-box flex-between align-center">
						<text class="thmeColor replayS" :style="{'--color': color}">商家回复：</text>
						<text class="thmeColor replayT" :style="{'--color': color}">{{item.updated_at}}</text>
					</view>
					<view class="replayTxt thmeColor" :style="{'--color': color}">
						{{item.comment_receive}}
					</view>
				</view>
				<view class="noReplay relative" v-if='!item.comment_receive'>
					<view class="thmeBg" :style="{'--color': color}"></view>
				</view>
			</view>
			<empty v-if='noData' cat='3' type='1' :msg='"没有相关的"+msg+"评论哦"'></empty>
			<view v-if='showDiLine' class="DiLine">
				------- 我也是有底线的 -------
			</view>
		</view>
	
	</view>
</template>

<script>
	import ImgLayOut from "../components/imgLayOut.vue"
	var that;
	export default {
		components:{ImgLayOut},
		data() {
			return {
				
				color: getApp().globalData.color,
				msg:'',
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				noData: false,
				
				toTop:false,
				currTab:0,
				commentList: [],
				count:'',// 评论数量
				page: 1,
				limit: 10,
				goodsId: '', // 商品id
				comment_level: '', // 查看的评价列表类型   ''全部  0好评 1中评 2差评  
				hasImg: '', // 是否有图 1有图
				more: false,
				showDiLine: false,
				comment_labels:'',
				label_id:'',
				showLabel: true,
				comment_id: ''
			}
		},
		onLoad(options) {
			that = this;
			if(options.comment_id) that.comment_id = options.comment_id
			if(options.label){that.label_id = options.label}
			if(options.level){
				that.comment_level = options.level
				that.currTab = parseInt(options.level) + 1
			}
			if(options.gid){
				that.goodsId = options.gid;
				that.getCommentList();
			}	
		},
		onPageScroll(e) {
			if (e.scrollTop > 200) {
				that.toTop = true
			} else {
				that.toTop = false
			}
		},
		onReachBottom() {
			if(that.more){
				that.page ++
				that.getCommentList()
			}
		},
		onShareAppMessage() {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid,
				imageUrl: shareData.imageUrl
			}
		},
		onShareTimeline() {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.desc,
				query: {
					share_v_id: vid
				},
				imageUrl: shareData.imageUrl
			}
		},
		methods: {
			getCommentList(){ // 获取评论列表
				that.more = false;
				that.noData = false;
				that.showDiLine = false;
				that.$http.get({
					url:'/singleSaleApi/get_comment',
					data:{
						goods_id: that.goodsId,//'53',
						page: that.page,
						pageNum: that.limit,
						comment_level: that.comment_level,
						has_img: that.hasImg,
						comment_label: that.label_id,
						comment_id: that.comment_id
					}
				}).then(res => {
					if(res.errcode == 100){
						if(res.count){
							that.count = res.count;
						}
						if(res.comment_labels){
							that.comment_labels = res.comment_labels;
						}
						if(res.data){
							that.commentList = that.commentList.concat(res.data);
							if(res.data.length > that.limit - 1){
								that.more = true;
							}
						}
						if(that.commentList.length > 1 && (!res.data || res.data.length < that.limit)){
							that.showDiLine = true
						}
						
					}
					if(that.commentList.length < 1){
						that.noData = true
					}
					
				})
			},
			chkTag(id){
				that.label_id = that.label_id == id?'':id
				that.page = 1;
				that.commentList = []
				that.getCommentList();
			},
			chkTab(index,type_,msg){
				if(that.currTab != index){
					that.commentList = [];
					that.currTab = index;
					that.page = 1;
					that.hasImg = '';
					that.msg = msg;
					if(type_ == 666){
						type_ = '';
						that.hasImg = 1; // 查看有图
					}
					that.comment_level = type_;
					that.getCommentList();
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.relative{position: relative;}
	.boxsShadow{box-shadow: 0 0 8rpx 2rpx rgba(105,105,105,.12);}
	.myTabs{
		padding: 10rpx 0 30rpx 30rpx;
		box-shadow: 0 0 10rpx 2rpx rgba(105,105,105,.13);
		position: relative;
		z-index: 2;
		.title{
			margin-top: 20rpx;
			text{
				font-weight: bold;
				font-size: 24rpx;
				color: #333333;
				margin-right: 10rpx;
				transition: all 0.2s;
			}
		}
		.flex-box{
			flex-wrap: wrap;
		}
		.tabs-list{
			margin-top: 20rpx;
			margin-bottom: -20rpx;
			.tabsItem{
				line-height: 50rpx;
				padding: 0 28rpx;
				border-radius: 54rpx;
				margin-right: 20rpx;
				position: relative;
				margin-bottom: 20rpx;
			}
		}
		
	}
	.tabsItem .thmeBg{position: absolute;width: 100%;height: 100%;top: 0;left: 0;border-radius: 54rpx;z-index: -1;opacity: .1;}
	.tabsItem .txt{color: white;}
	.tabsItem .count{margin-left: 4rpx;}
	.active .thmeBg{opacity: 1;}
	.MORE::after{line-height: normal;}
	
	.commentList{padding: 36rpx;}
	.commentItem{padding: 30rpx;background-color: #FFFFFF;margin-bottom: 40rpx;}
	.userHead{width: 58rpx;height: 58rpx;border-radius: 50%;margin-right: 24rpx;}
	.userName{margin-right: 10rpx;}
	.commentContent{padding: 30rpx 30rpx 0;}
	.time{font-size: 20rpx; color: #999999;}
	
	.starBox{position: relative;margin-left: -6rpx;}
	.star{width: 30rpx;height: 30rpx;margin: 0 6rpx;}
	.starMask{position: absolute;height: 100%;top: 0;left: 0;background: #FFFFFF;overflow: hidden; opacity: .8;white-space: nowrap;}
	.starMask .star{display: inline-block;margin-bottom: 20rpx;}
	
	.usercmt{color: #333333;margin-top: 20rpx;}
	.imgBox {
		margin-top: 20rpx;
	}
	.comment-tags{
		text{
			display: inline-block;
			line-height: 40rpx;
			border-radius: 40rpx;
			border: 1px solid #EEEEEE;
			color: #999999;
			padding: 0 20rpx;
			margin-right: 20rpx;
			margin-top: 16rpx;
			&.active{
				border: 1px solid var(--color);
				color: var(--color);
			}
		}
	}
	.goodsName{color: #999999;margin-top: 20rpx;}
	/* 商家回复 */
	.storeReplay{margin: 30rpx -30rpx -30rpx -30rpx;padding: 30rpx 60rpx;}
	.noReplay .thmeBg,.storeReplay .thmeBg{position: absolute;width: 100%;height: 100%;top: 0;left: 0;border-radius: 0 0 10rpx 10rpx;opacity: .05;}
	.replayS{opacity: 0.8;}.replayT{opacity: 0.6;}.replayTxt{margin-top: 20rpx;}
	.noReplay{
		height: 78rpx;margin: -30rpx -30rpx -40rpx -30rpx;z-index: -1;
	}
	.noReplayRadious{border-radius: 10rpx 10rpx 0 70rpx;}
</style>
